<template>
	<view class="result-container">
		<!-- 自定义导航栏 -->
		<custom-navbar title="扫码核销"></custom-navbar>
		
		<!-- 主要内容区域 -->
		<view class="main-content">
			<!-- 核销码 -->
			<view class="verification-code-section">
				
				<view class="code-value">核销码 {{ verificationDetail.code }}</view>
				<view class="divider"></view>
			</view>
			
			<!-- 服务内容 -->
			<view class="service-content-section">
				<view class="section-title">服务内容</view>
				<view class="service-list">
					<view class="service-item">XXX标准洗车服务包含</view>
					<view class="service-item">整车泡沫冲洗擦T</view>
					<view class="service-item">轮胎轮毂冲洗清洁</view>
					<view class="service-item">车内吸尘</view>
					<view class="service-item">内饰脚垫简单除尘</view>
				</view>
				<view class="service-note">(不包含虫户、水泥、沥青和顽固污渍清理等)</view>
				<view class="divider"></view>
			</view>
			
			<!-- 订单信息 -->
			<view class="order-info-section">
				<view class="section-title">订单信息</view>
				<view class="order-details">
					<view class="order-item">
						<view class="order-label">订单价格:</view>
						<view class="order-value">¥30.00</view>
					</view>
					<view class="order-item">
						<view class="order-label">实付金额:</view>
						<view class="order-value highlight">¥25.00</view>
					</view>
					<view class="order-item">
						<view class="order-label">优惠金额:</view>
						<view class="order-value">¥5.00</view>
					</view>
					<view class="order-item">
						<view class="order-label">订单编号</view>
						<view class="order-value">2020032554565799</view>
					</view>
					<view class="order-item">
						<view class="order-label">支付时间</view>
						<view class="order-value">2020.03.30 14:40:45</view>
					</view>
					<view class="order-item">
						<view class="order-label">预约时间</view>
						<view class="order-value">2020.03.30 14:40</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 确认核销按钮 -->
		<view class="confirm-button">
			<button class="confirm-btn" :class="{ 'verified': isVerified }" @click="handleVerification">
				{{ isVerified ? '已核销' : '确认核销' }}
			</button>
		</view>
		
		<!-- 确认弹窗 -->
		<view class="modal-overlay" v-if="showModal" @click="closeModal">
			<view class="modal-content" @click.stop>
				<view class="modal-title">核销此订单</view>
				<view class="modal-message">请您仔细核对订单,此操作不可撤销<br/>请谨慎操作!</view>
				<view class="modal-buttons">
					<button class="modal-btn cancel" @click="closeModal">取消</button>
					<button class="modal-btn confirm" @click="confirmVerification">确认</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	components: {
		'custom-navbar': () => import('@/components/custom-navbar.vue')
	},
	data() {
		return {
			verificationCode: '',
			verificationType: '',
			resultType: 'success', // success, failed, expired
			verificationDetail: {
				code: 'MC1234-5678-9012',
				serviceType: '洗车服务券',
				customerName: '张先生',
				amount: '30.00',
				time: ''
			},
			isVerified: false,
			showModal: false,
			relatedServices: [
				{
					name: '查看核销记录',
					desc: '查看历史核销记录',
					icon: '/static/核销记录 (1).png',
					url: '/pages/records/records'
				},
				{
					name: '订单管理',
					desc: '管理客户订单',
					icon: '/static/订单管理.png',
					url: '/pages/orders/orders'
				},
				{
					name: '客户评价',
					desc: '查看客户评价',
					icon: '/static/评价管理.png',
					url: '/pages/reviews/reviews'
				}
			]
		}
	},
	computed: {
		statusIcon() {
			const icons = {
				success: '/static/success.png',
				failed: '/static/error.png',
				expired: '/static/warning.png'
			}
			return icons[this.resultType] || icons.success
		},
		resultTitle() {
			const titles = {
				success: '核销成功',
				failed: '核销失败',
				expired: '核销码已过期'
			}
			return titles[this.resultType] || titles.success
		},
		resultDesc() {
			const descs = {
				success: '恭喜您，核销操作已完成',
				failed: '核销码无效或已被使用',
				expired: '该核销码已过期，请重新获取'
			}
			return descs[this.resultType] || descs.success
		}
	},
	onLoad(options) {
		this.verificationCode = options.code || ''
		this.verificationType = options.type || 'input'
		
		// 模拟核销结果
		this.simulateVerification()
	},
	methods: {
		// 模拟核销验证
		simulateVerification() {
			// 设置核销详情（无论成功失败都显示）
			this.verificationDetail = {
				code: this.verificationCode || 'MC1234-5678-9012',
				serviceType: '洗车服务券',
				customerName: '张先生',
				amount: '30.00',
				time: this.formatTime(new Date())
			}
			
			// 模拟不同的核销结果
			const results = ['success', 'failed', 'expired']
			const randomResult = results[Math.floor(Math.random() * results.length)]
			this.resultType = randomResult
		},
		
		// 格式化时间
		formatTime(date) {
			const year = date.getFullYear()
			const month = String(date.getMonth() + 1).padStart(2, '0')
			const day = String(date.getDate()).padStart(2, '0')
			const hours = String(date.getHours()).padStart(2, '0')
			const minutes = String(date.getMinutes()).padStart(2, '0')
			return `${year}-${month}-${day} ${hours}:${minutes}`
		},
		
		// 返回上一页
		goBack() {
			uni.navigateBack()
		},
		
		// 继续核销
		continueVerification() {
			if (this.verificationType === 'scan') {
				uni.navigateTo({
					url: '/pages/verification/scan'
				})
			} else {
				uni.navigateTo({
					url: '/pages/verification/input'
				})
			}
		},
		
		// 重新核销
		retryVerification() {
			if (this.verificationType === 'scan') {
				uni.navigateTo({
					url: '/pages/verification/scan'
				})
			} else {
				uni.navigateTo({
					url: '/pages/verification/input'
				})
			}
		},
		
		// 跳转到相关服务
		goToService(service) {
			uni.navigateTo({
				url: service.url
			})
		},
		
		// 处理核销操作
		handleVerification() {
			if (this.isVerified) {
				return // 已核销，不执行任何操作
			}
			this.showModal = true
		},
		
		// 关闭弹窗
		closeModal() {
			this.showModal = false
		},
		
		// 确认核销
		confirmVerification() {
			this.showModal = false
			this.isVerified = true
			
			// 显示核销成功提示
			uni.showToast({
				title: '核销成功',
				icon: 'success'
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.result-container {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding-bottom: 40rpx;
	padding-top: calc(env(safe-area-inset-top) + 88rpx);
	position: relative;
	
	&::before {
		content: '';
		position: absolute;
		top: calc(env(safe-area-inset-top) + 88rpx);
		left: 0;
		right: 0;
		height: 600px;
		background-image: linear-gradient(
			to bottom,
			#2f81fa 0%, #2f81fa 33.33%,
			#f7f7f7 33.33%, #f7f7f7 100% 
		);
		background-repeat: no-repeat;
		z-index: 0;
	}
}

.main-content {
	position: relative;
	z-index: 1;
	margin: 40rpx 30rpx;
	background: #ffffff;
	border-radius: 20rpx;
	padding: 40rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.verification-code-section {
	margin-bottom: 40rpx;
	
	.code-label {
		font-size: 28rpx;
		color: #666666;
		margin-bottom: 16rpx;
	}
	
	.code-value {
		text-align: center;
		font-size: 36rpx;
		font-weight: 470;
		color: #333333;
		letter-spacing: 2rpx;
	}
}

.service-content-section {
	margin-bottom: 40rpx;
	
	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 24rpx;
	}
	
	.service-list {
		margin-bottom: 16rpx;
		
		.service-item {
			font-size: 28rpx;
			color: #333333;
			line-height: 1.6;
			margin-bottom: 8rpx;
		}
	}
	
	.service-note {
		font-size: 24rpx;
		color: #333333;
		line-height: 1.4;
	}
}

.order-info-section {
	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 24rpx;
	}
	
	.order-details {
		.order-item {
			display: flex;
			align-items: center;
			margin-bottom: 16rpx;
			
			.order-label {
				font-size: 28rpx;
				color: #666666;
				margin-right: 15rpx;
			}
			
			.order-value {
				font-size: 28rpx;
				color: #333333;
				font-weight: 400;
				
				&.highlight {
					font-weight: 600;
					color: #333333;
				}
			}
		}
	}
}

.confirm-button {
	margin: 40rpx 30rpx 0;
	padding-top: 10rpx;
	
	.confirm-btn {
		width: 87%;
		height: 88rpx;
		background: #007AFF;
		color: #ffffff;
		border: none;
		border-radius: 44rpx;
		font-size: 32rpx;
		font-weight: 600;
		
		&.verified {
			background: #CCCCCC;
			color: #666666;
		}
	}
}

.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

.modal-content {
	background: #ffffff;
	border-radius: 16rpx;
	padding: 40rpx;
	margin: 0 60rpx;
	width: calc(100% - 120rpx);
	max-width: 500rpx;
}

.modal-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333333;
	text-align: center;
	margin-bottom: 24rpx;
}

.modal-message {
	font-size: 28rpx;
	color: #666666;
	text-align: center;
	line-height: 1.5;
	margin-bottom: 40rpx;
}
.divider {
	margin-top: 20rpx;
			height: 6rpx;
			background: #f0f0f0;
			margin-bottom: 16rpx;
		}
.modal-buttons {
	display: flex;
	gap: 20rpx;
}

.modal-btn {
	flex: 1;
	height: 80rpx;
	border-radius: 12rpx;
	font-size: 28rpx;
	font-weight: 500;
	border: none;
	
	&.cancel {
		background: #ffffff;
		color: #666666;
		border: 2rpx solid #E5E5E5;
	}
	
	&.confirm {
		background: #007AFF;
		color: #ffffff;
	}
}
</style>
